
<template>
  <div>
    
    <card class="strpied-tabled-with-hover" body-classes=" table-responsive">
      <template slot="header">
        <h4 class="card-title">停车场相关管理员</h4>
        <p class="card-category"></p>
      </template>

      <div style="margin-top: 15px;">
        <div class="search">
          <el-input placeholder="请输入内容" v-model="searchData" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
              <el-option label="提交审核者姓名" value="1"></el-option>
              <el-option label="停车场名称" value="2"></el-option>
              <el-option label="提交审核者工号" value="3"></el-option>
            </el-select>
            <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </div>
      <el-table
        :data="list"
        style="width: 100%"
        border
        :row-class-name="tableRowClassName"
        row-key="id"
      >
        <el-table-column prop="username" label="管理员工号" width="180"></el-table-column>
        <el-table-column prop="number" label="管理员姓名" width="180"></el-table-column>
        <el-table-column prop="sex" label="管理员性别" width="180"></el-table-column>
        <el-table-column prop="role" label="管理员权限" width="180"></el-table-column>

       
      </el-table>
      <div class="row">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[1, 2,5, 10]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <el-button type="success" @click="back()" class="col-2">返回</el-button>
      </div>
    </card>
  </div>
</template>
<style>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
<script>
import LTable from "src/components/Table.vue";
import Card from "src/components/Cards/Card.vue";

export default {
  components: {
    LTable,
    Card
  },
  data() {
    return {
      id:"",
      select: "",
      input5: "",
     list: [],
      area: [],
      data: [],
      limit: 5,
      total: null,
      page: 1,
      searchData: ""
    };
  },
  created: function() {
    const routerParams = this.$route.query.id;
    this.id=routerParams;
    this.getManager();
  },
  methods: {
    // 处理数据
    getList() {
      // es6过滤得到满足搜索条件的展示数据list
      let list = this.data.filter((item, index) =>
        item.username.includes(this.searchData)
      );
      this.list = list.filter(
        (item, index) =>
          index < this.page * this.limit &&
          index >= this.limit * (this.page - 1)
      );
      this.total = list.length;
    },
    back(){
      this.$router.go(-1);
    },
    getManager() {
      this.$ajax({
        method: "get",
        url: "admin/area_admin/"+this.id
      })
        .then(res => {
          if(res.data.data!=null){
          this.list = res.data.data;
          this.data =this.list;
          this.getList();
          }
        })
        .catch(error => {
          this.$message({
                type: "info",
                message:"您没有权限访问该页面"
         });
          console.log(error);
        });
    },
    changeIT(row) {
      console.log(row.id);
      this.$router.push({
        path: "/admin/park-profile",
        query: {
          id: row.id,
         
        }
      });
      //this.$router.push("/admin/manager-profile");
    },
    deleteIT(row) {
      this.$confirm("此操作将永久删除该停车场, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteManager();
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    deleteManager() {
      alert("you delete");
    },
    addManager() {
      this.$router.push("/admin/add");
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.getList();
    },
    // 当当前页改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.getList();
    },
    // 搜索过滤数据
    search() {
      this.page = 1;
      this.getList();
    }
  }
};
</script>